<!--该组件为承保一张图左侧展示区表格组件-->

<template>
  <!--档案表组件容器-->
<div class="dossier-chart-container">
  <!--档案表表头容器-->
  <div class="chart-title-pot">
    <span class="text-color-gradient">{{listItem.chartTitle}}</span>
  </div>
  <!--档案表表体容器-->
  <div class="chart-body-pot">
    <!--档案表表体-->
    <table>
      <tbody>
        <tr v-for="(item,index) in listItem.chartBody">
          <td>{{item.label}}</td><td>{{item.value}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <!--表下横线-->
  <img class="color-line" src="@/assets/images/business/underwritemap/color-line.png">
</div>
</template>

<script>
export default {
  name:"DossierChart",
  //采用props完整方式接收父组件underwriteMap传过来的数据
  props: {
    listItem: {
      type: Object,   //限制要接收的数据类型
      default: () => {  //设置默认值
        return {}
      }
    }
  },

}
</script>

<style lang="scss" scoped>
//引入公共样式
@import "@/assets/styles/business.scss";
  //设置档案表组件容器样式
  .dossier-chart-container{
    //设置宽高
    width: 100%;
    height: 16%;


    margin-bottom: 15px; //设置档案表之间距离
    //设置档案表表头容器样式
    .chart-title-pot{
      margin-bottom: 5px; //设置表头和表体间距
    }
    //设置档案表表体容器样式
    .chart-body-pot{
      //设置表中字体样式
      font-size: 14px;
      color:rgba(131, 158, 203, 1);
      margin-bottom: 3px; //设置表体和横线间距
    }
    //设置档案表表体下方横线样式
    .color-line{
      //设置宽度
      width: 100%;
      margin-bottom: 4px; //设置横线与表头间距
    }
  }
</style>
